<template>
  <div style="padding-top: 16px;">
    <p>
      <strong>预览</strong>
    </p>
    <z-slides :selected.sync="selected" :showBot="false" :changeTime="1">
      <z-slides-item name="1">
        <div class="box">1</div>
      </z-slides-item>
      <z-slides-item name="2">
        <div class="box">2</div>
      </z-slides-item>
      <z-slides-item name="3">
        <div class="box">3</div>
      </z-slides-item>
      <z-slides-item name="4">
        <div class="box">4</div>
      </z-slides-item>
    </z-slides>

    <p>
      <strong>代码</strong>
    </p>
    <pre><code>{{content}}</code></pre>
  </div>
</template>
<script>
  import {zSlides, zSlidesItem} from '../../../src/main'

  export default {
    components: {
      zSlides, zSlidesItem
    },
    data () {
      return {
        selected: 1,
        content: `
           <z-slides :selected.sync="selected" :showBot="false" :changeTime="1">
            <z-slides-item name="1">
              <div class="box">1</div>
            </z-slides-item>
            <z-slides-item name="2">
              <div class="box">2</div>
            </z-slides-item>
            <z-slides-item name="3">
              <div class="box">3</div>
            </z-slides-item>
            <z-slides-item name="4">
              <div class="box">4</div>
            </z-slides-item>
          </z-slides>

          data: {
            selected: 1
          }

          <style lang="scss" scoped>
            .box{
              height: 300px;
              background: pink;
              color: white;
              font-size: 30px;
              display: flex;
              justify-content: center;
              align-items: center;
            } 
          </style>

      `.replace(/^ {8}/gm, '').trim()
      }
    }
  }
</script>
<style lang="scss" scoped>
  @import 'var';
  .box{
    height: 300px;
    background: pink;
    color: white;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  } 
</style>
